<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <div v-if="status === 200">
      <van-cell icon="passed" title="品鉴卡核销成功信息" />
      <van-cell-group>
        <van-cell title="品鉴名称:" :value="record.card_name" />
        <van-cell title="商家名称:" :value="record.retailer_name" />
        <van-cell title="客户姓名:" :value="record.name" />
        <van-cell title="商家姓名:" :value="record.r_name" />
        <van-cell title="核销时间:" :value="record.confirm_time" />
      </van-cell-group>
    </div>
    <van-empty v-if="status === 400" image="error" :description="error_text">
      <template #description>
          <div style="text-align:center;line-height:24px;" v-html="error_text"></div>
      </template>
    </van-empty>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import { wxClientSampleConfirm } from "@/api/card";

export default {
  name: "SampleCardConfirm",
  components: {
    NavBar,
  },

  computed: {},

  props: ["sample_key"],

  data() {
    return {
      title: this.$route.meta.title,
      pid: this.$route.query.pid,
      status: -1,
      error_text: "品鉴卡核销失败",
      record: {},
    };
  },

  created() {
    this.handleSampleConfirm();
  },
  mounted() {
    // this.$toast.loading({
    //   duration: 0,
    //   message: "核销中...",
    //   forbidClick: true,
    //   loadingType: "spinner",
    // });
  },
  methods: {
    handleSampleConfirm() {
      this.$toast.loading({
        duration: 0,
        message: "核销中...",
        forbidClick: true,
        loadingType: "spinner",
      });

      const data = {
        pid: this.pid,
        key: this.sample_key,
      };
      wxClientSampleConfirm(data)
        .then((res) => {
          console.log(res);
          // this.$toast.clear();
          this.status = res.data.status_code;
          this.error_text = res.data.message;
          this.record = res.data.data;
          this.$toast.clear();
          this.$toast(res.data.toast||res.data.message);
        })
        .catch((error) => {
          console.log(error);
          this.$toast.clear();
          this.status = 400;
          this.$toast(error.response.data.toast || error.response.data.message);
          this.error_text = error.response.data.message;
        });
    },
  },
};
</script>

<style  scoped>
.van-cell__value {
  flex: 5;
  text-align: left;
}
</style>